<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const articles = ref([
  { id: 1, title: 'Vue 3 组合式API详解', date: '2024-01-15', category: '技术分享', tags: ['Vue.js', 'JavaScript'] },
  { id: 2, title: 'TypeScript 高级类型应用', date: '2024-01-10', category: '学习笔记', tags: ['TypeScript'] },
  { id: 3, title: '前端性能优化实践', date: '2024-01-05', category: '项目经验', tags: ['性能优化', 'JavaScript'] },
  { id: 4, title: 'React Hooks 最佳实践', date: '2023-12-28', category: '技术分享', tags: ['React', 'JavaScript'] },
  { id: 5, title: '微服务架构设计思考', date: '2023-12-20', category: '项目经验', tags: ['架构设计', '微服务'] },
  { id: 6, title: 'CSS Grid 布局完全指南', date: '2023-12-15', category: '学习笔记', tags: ['CSS', 'Layout'] },
  { id: 7, title: '年终总结与新年规划', date: '2023-12-31', category: '生活随笔', tags: ['总结', '规划'] },
  { id: 8, title: 'Docker 容器化部署实践', date: '2023-11-25', category: '工具推荐', tags: ['Docker', 'DevOps'] },
  { id: 9, title: 'Node.js 性能监控与调优', date: '2023-11-18', category: '技术分享', tags: ['Node.js', '性能优化'] },
  { id: 10, title: '设计模式在前端中的应用', date: '2023-11-10', category: '学习笔记', tags: ['设计模式', 'JavaScript'] },
  { id: 11, title: 'Git 工作流最佳实践', date: '2023-10-28', category: '工具推荐', tags: ['Git', '工作流'] },
  { id: 12, title: '函数式编程思想入门', date: '2023-10-15', category: '学习笔记', tags: ['函数式编程', 'JavaScript'] }
]);

const selectedYear = ref('');
const selectedMonth = ref('');
const viewMode = ref('timeline'); // timeline 或 calendar

// 按年月分组文章
const articlesByDate = computed(() => {
  const grouped = {};
  articles.value.forEach(article => {
    const date = new Date(article.date);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    
    if (!grouped[year]) {
      grouped[year] = {};
    }
    if (!grouped[year][month]) {
      grouped[year][month] = [];
    }
    grouped[year][month].push(article);
  });
  return grouped;
});

// 获取所有年份
const years = computed(() => {
  return Object.keys(articlesByDate.value).sort((a, b) => b - a);
});

// 获取选中年份的月份
const months = computed(() => {
  if (!selectedYear.value || !articlesByDate.value[selectedYear.value]) return [];
  return Object.keys(articlesByDate.value[selectedYear.value]).sort((a, b) => b - a);
});

// 过滤后的文章
const filteredArticles = computed(() => {
  let result = articles.value;
  
  if (selectedYear.value) {
    result = result.filter(article => {
      const year = new Date(article.date).getFullYear();
      return year.toString() === selectedYear.value;
    });
  }
  
  if (selectedMonth.value) {
    result = result.filter(article => {
      const month = new Date(article.date).getMonth() + 1;
      return month.toString() === selectedMonth.value;
    });
  }
  
  return result.sort((a, b) => new Date(b.date) - new Date(a.date));
});

// 统计信息
const statistics = computed(() => {
  const total = articles.value.length;
  const currentYear = new Date().getFullYear();
  const thisYear = articles.value.filter(article => 
    new Date(article.date).getFullYear() === currentYear
  ).length;
  
  return { total, thisYear };
});

function formatDate(dateStr) {
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  });
}

function resetFilters() {
  selectedYear.value = '';
  selectedMonth.value = '';
}

onMounted(() => {
  console.log('归档页面已加载');
});
</script>

<template>
  <div class="archive-page">
    <el-card class="mb-16px">
      <template #header>
        <div class="card-header">
          <span class="text-20px font-bold">文章归档</span>
          <div class="flex items-center gap-8px">
            <el-tag type="primary">总计 {{ statistics.total }} 篇</el-tag>
            <el-tag type="success">今年 {{ statistics.thisYear }} 篇</el-tag>
          </div>
        </div>
      </template>
      <div class="text-gray-700 dark:text-gray-200">
        <p>这是归档测试页面，按时间顺序展示所有文章。</p>
      </div>
    </el-card>

    <el-card class="mb-16px">
      <template #header>
        <div class="card-header">
          <span class="text-16px font-bold">筛选条件</span>
          <div class="flex items-center gap-8px">
            <el-button-group>
              <el-button 
                :type="viewMode === 'timeline' ? 'primary' : ''"
                @click="viewMode = 'timeline'"
              >
                时间线视图
              </el-button>
              <el-button 
                :type="viewMode === 'calendar' ? 'primary' : ''"
                @click="viewMode = 'calendar'"
              >
                日历视图
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>
      <div class="flex items-center gap-12px flex-wrap">
        <el-select v-model="selectedYear" placeholder="选择年份" clearable style="width: 120px">
          <el-option
            v-for="year in years"
            :key="year"
            :label="year + '年'"
            :value="year"
          />
        </el-select>
        <el-select 
          v-model="selectedMonth" 
          placeholder="选择月份" 
          clearable 
          style="width: 120px"
          :disabled="!selectedYear"
        >
          <el-option
            v-for="month in months"
            :key="month"
            :label="month + '月'"
            :value="month"
          />
        </el-select>
        <el-button v-if="selectedYear || selectedMonth" @click="resetFilters">
          重置筛选
        </el-button>
        <div class="ml-auto text-gray-500">
          找到 {{ filteredArticles.length }} 篇文章
        </div>
      </div>
    </el-card>

    <!-- 时间线视图 -->
    <div v-if="viewMode === 'timeline'" class="timeline-view">
      <el-card>
        <template #header>
          <div class="card-header">
            <span class="text-16px font-bold">文章时间线</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="article in filteredArticles"
            :key="article.id"
            :timestamp="formatDate(article.date)"
            placement="top"
          >
            <el-card class="timeline-card">
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <h4 class="text-16px font-bold mb-8px text-primary cursor-pointer hover:underline">
                    {{ article.title }}
                  </h4>
                  <div class="flex items-center gap-8px mb-8px">
                    <el-tag size="small" type="info">{{ article.category }}</el-tag>
                    <el-tag 
                      v-for="tag in article.tags" 
                      :key="tag"
                      size="small"
                      effect="plain"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>

    <!-- 日历视图 -->
    <div v-else class="calendar-view">
      <el-card>
        <template #header>
          <div class="card-header">
            <span class="text-16px font-bold">文章日历</span>
          </div>
        </template>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16px">
          <el-card 
            v-for="article in filteredArticles"
            :key="article.id"
            class="article-card cursor-pointer hover:shadow-lg transition-all duration-300"
          >
            <div class="article-date text-12px text-gray-500 mb-8px">
              {{ formatDate(article.date) }}
            </div>
            <h4 class="text-14px font-bold mb-8px text-primary hover:underline">
              {{ article.title }}
            </h4>
            <div class="flex items-center gap-4px flex-wrap">
              <el-tag size="small" type="info">{{ article.category }}</el-tag>
              <el-tag 
                v-for="tag in article.tags.slice(0, 2)" 
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
              <span v-if="article.tags.length > 2" class="text-12px text-gray-400">
                +{{ article.tags.length - 2 }}
              </span>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-card {
  margin-bottom: 0;
}

.article-card:hover {
  transform: translateY(-2px);
}

.article-date {
  font-family: 'Courier New', monospace;
}
</style> 